<template>
  <v-layout type="main">
    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn" @click="$router.push({ path: '/org/detail' })">+ 新增</div>

        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="" @input="getData" />
        </div>
      </div>
    </div>

    <el-table :data="tableData">
      <el-table-column prop="name" label="项目组名称" />
      <!-- <el-table-column prop="adminList" :formatter="formatterAdmin" label="管理员" /> -->
      <el-table-column prop="adminList" label="项目组成员">
        <template slot-scope="{ row }">
          <adminList :userRole="userRole" :row="row" />
        </template>
      </el-table-column>
      <el-table-column prop="productList" label="项目资源组">
        <template slot-scope="{ row }">
          <productList :row="row" />
        </template>
      </el-table-column>

      <el-table-column prop="update_time" label="修改时间" />
      <el-table-column prop="op" label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="put(row.id)">修改</el-button>

          <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
            <p>您确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text">
              <i class="el-icon-delete delete-btn" />
              删除
            </el-button>
          </el-popover>

          <el-button type="text" @click="disable(row.id)" :disabled="row.enabled">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>

  </v-layout>
</template>

<script>
import { organizationLis, delOrganizationr, disableOrganizationr, getUserRbacRole } from '@/api/org'
import adminList from './orgModules/adminList'
import productList from './orgModules/productList'

export default {
  data() {
    return {
      tableData: [],
      userRole: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  async created() {
    this.getData()
    this.getRoleAll()
  },
  components: {
    adminList,
    productList
  },
  methods: {
    async getData() {
      let res = await organizationLis({ ...this.Pagedata })
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async getRoleAll() {
      let res = await getUserRbacRole()
      console.log(res)
      this.userRole = res.data
    },
    put(id) {
      this.$router.push({
        path: '/org/detail',
        query: { id }
      })
    },
    async del(id) {
      await delOrganizationr({ id })
      this.getData()
    },
    async disable(id) {
      await disableOrganizationr({ id })
      this.getData()
    },
    lookNode(row) {
      console.log(row)
    },
    setNode(row) {
      console.log(row)
    },
    formatterAdmin(row) {
      let admin = row.adminList.map(e => e.nickName)
      return admin.join('<br />')
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped></style>
